<template>
  <div>
    <div class="enterpris-search">
      <el-input
        type="text"
        v-model="searchObj.searchParams"
        placeholder="输入宣讲会名称试试"
        auto-complete="off"
        style="width: 160px"
      ></el-input>
      <el-button
        icon="el-icon-search"
        @click="searchPropaganda"
        style="margin-left: 15px"
      ></el-button>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="dialogFormVisible = true"
      ></el-button>
    </div>
    <el-divider>校园宣讲</el-divider>
    <div>
      <div v-for="item in list" :key="item.mid">
        <el-descriptions :title="item.name">
          <template slot="extra">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit-outline"
              @click="query(item.mid)"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="deletePropaganda(item.mid)"
            ></el-button>
          </template>
          <el-descriptions-item label="宣讲会名称">{{
            item.name
          }}</el-descriptions-item>
          <el-descriptions-item label="宣讲地点">{{
            item.location
          }}</el-descriptions-item>
          <el-descriptions-item label="公司名称">{{
            item.company
          }}</el-descriptions-item>
          <el-descriptions-item label="宣讲时间">
            <el-date-picker
              v-model="item.time"
              type="datetime"
              readonly
            ></el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item label="预计参与人数">{{
            item.numbers
          }}</el-descriptions-item>
          <el-descriptions-item label="宣讲会类型">{{
            item.type
          }}</el-descriptions-item>
          <el-descriptions-item label="完成状态">{{
            item.finish
          }}</el-descriptions-item>
          <el-descriptions-item label="具体描述">{{
            item.info
          }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
      </div>
    </div>
    <!-- 添加 -->
    <el-dialog
      title="添加宣讲会"
      :visible.sync="dialogFormVisible"
      modal
      :append-to-body="true"
    >
      <el-form :model="form" :inline="true">
        <el-form-item label="宣讲会名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            placeholder="宣讲会名称"
            autocomplete="off"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="地点" :label-width="formLabelWidth">
          <el-input
            v-model="form.location"
            placeholder="宣讲会地点"
            autocomplete="off"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司" :label-width="formLabelWidth">
          <el-input
            v-model="form.company"
            placeholder="公司名称"
            autocomplete="off"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-input
            v-model="form.type"
            placeholder="宣讲会类型"
            autocomplete="off"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.time"
            type="datetime"
            placeholder="选择日期时间"
            style="width: 195px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预计参与人数" :label-width="formLabelWidth">
          <el-input
            v-model.number="form.numbers"
            placeholder="预计人数"
            autocomplete="off"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="完成状态" :label-width="formLabelWidth">
          <el-select
            v-model="form.finish"
            placeholder="请选择当前状态"
            style="width: 195px"
          >
            <el-option label="未完成" value="未完成"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="暂停中" value="暂停中"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="具体信息" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="form.info"
            placeholder="宣讲会的具体细节描述"
            autocomplete="off"
            style="width: 200px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">添加</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="更新"
      :visible.sync="dialogEditFormVisible"
      modal
      :append-to-body="true"
    >
      <el-form :model="editForm" :inline="true">
        <el-form-item label="宣讲会名称" :label-width="formLabelWidth">
          <el-input
            v-model="editForm.name"
            placeholder="宣讲会名称"
            autocomplete="off"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="地点" :label-width="formLabelWidth">
          <el-input
            v-model="editForm.location"
            placeholder="宣讲会地点"
            autocomplete="off"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司" :label-width="formLabelWidth">
          <el-input
            v-model="editForm.company"
            placeholder="公司名称"
            autocomplete="off"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-input
            v-model="editForm.type"
            placeholder="宣讲会类型"
            autocomplete="off"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editForm.time"
            type="datetime"
            placeholder="选择日期时间"
            style="width: 195px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预计参与人数" :label-width="formLabelWidth">
          <el-input
            v-model.number="editForm.numbers"
            placeholder="预计人数"
            autocomplete="off"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="完成状态" :label-width="formLabelWidth">
          <el-select
            v-model="editForm.finish"
            placeholder="请选择当前状态"
            style="width: 195px"
          >
            <el-option label="未完成" value="未完成"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="暂停中" value="暂停中"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="具体信息" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="editForm.info"
            placeholder="宣讲会的具体细节描述"
            autocomplete="off"
            style="width: 200px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">更新</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "RecommendEnterprisepropagandameeting",

  data() {
    return {
      list: [],
      searchObj: {
        searchParams: "",
      },
      dialogFormVisible: false,
      dialogEditFormVisible: false,
      form: {
        name: "",
        location: "",
        company: "",
        info: "",
        type: "",
        time: new Date(),
        numbers: "",
        finish: "",
      },
      formLabelWidth: "100px",
      editForm: {
        mid: "",
        hid: "",
        name: "",
        location: "",
        company: "",
        info: "",
        type: "",
        time: new Date(),
        numbers: "",
        finish: "",
      },
      queryObj: {
        mid: 0,
      },
      deleteObj: {
        mid: 0,
      },
    };
  },

  mounted() {
    this.loadList();
  },

  watch: {
    list(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal != null) {
        return;
      } else {
        this.$notify({
          title: "温馨提示",
          message: "还未添加宣讲会哦",
          position: "top-left",
          type: "warning",
        });
      }
    },
    // 监听
    "searchObj.searchParams": function (newVal) {
      if (newVal === "") {
        this.loadList();
      } else {
        alert("hhh");
        return;
      }
    },
  },
  methods: {
    // 加载数据
    loadList() {
      this.$axios
        .post("/propaganda/queryAllPropagandaByHid")
        .then((res) => {
          if (res.data.result != null) {
            this.list = res.data.result;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 查询宣讲会
    searchPropaganda() {
      this.$axios
        .post("/propaganda/searchByParams", this.searchObj)
        .then((res) => {
          if (res.data.result != null) {
            this.list = res.data.result;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 添加宣讲会
    add() {
      this.$axios
        .post("/propaganda/add", this.form)
        .then((res) => {
          var response = res.data.desc;
          if (response === "添加失败") {
            this.$message({
              message: "添加失败",
              type: "error",
            });
            return;
          } else if (response === "添加成功") {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.loadList();
            this.dialogFormVisible = false;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 查询单个宣讲会
    query(val) {
      this.dialogEditFormVisible = true;
      this.queryObj.mid = val;
      this.$axios
        .post("/propaganda/queryOnePropaganda", this.queryObj)
        .then((res) => {
          if (res.data.result != null) {
            this.editForm = res.data.result;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 更新
    update() {
      this.$axios
        .post("/propaganda/updatePropaganda", this.editForm)
        .then((res) => {
          var response = res.data.desc;
          if (response === "更新失败") {
            this.$message({
              message: "更新失败",
              type: "error",
            });
            return;
          } else if (response === "更新成功") {
            this.loadList();
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.dialogEditFormVisible = false;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 删除
    deletePropaganda(val) {
      this.deleteObj.mid = val;
      this.$axios
        .post("/propaganda/deletePropaganda", this.deleteObj)
        .then((res) => {
          var response = res.data.desc;
          if (response === "删除失败") {
            this.$message({
              message: "删除失败",
              type: "error",
            });
            return;
          } else if (response === "删除成功") {
            this.loadList();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
  },
};
</script>

<style scoped>
.enterpris-search {
  margin-top: 25px;
}
</style>
